<template>
    <view class="address-container">
        <nav-bar :title="title"></nav-bar>
        <!-- <view class="address-body">
            <view class="address-title">
                <view class="address-title-name">名称</view>
                <view class="address-title-address">地点</view>
                <view class="address-title-distance">距离</view>
                <view class="address-title-navigation">导航</view>
            </view>
            <view class="address-list">
                <view
                    class="address-item"
                    v-for="(item, index) in addressList"
                    :key="index"
                >
                    <view class="address-item-name">{{ item.name }}</view>
                    <view class="address-item-address">{{
                        item.cabin_location
                    }}</view>
                    <view class="address-item-distance">800米</view>
                    <view class="address-item-navigation">
                        <image src="../static/navigation.png" mode="" />
                    </view>
                </view>
            </view>
        </view>
        <view class="address-btn-list">
            <view @click="toPrint">远程打印邮寄绘本</view>
            <view>我的打印绘本订单</view>
        </view> -->
		<view class="content">
			<view class="btn_sj">
				<image @click="toPrint" src="../static/dy_icon1.png" mode="widthFix"></image>
				<image src="../static/dy_icon2.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="zb_list">
			<view class="bt_txt"><span class="txt">自助屋列表</span></view>
			<view class="list"v-for="(item, index) in addressList"
                    :key="index">
				<view class="txt1">{{item.name}}</view>
				<view class="txt_nr">
					<view class="txt_nr1">
						<view class="txt2">{{item.cabin_location}}</view>
						<view class="txt2">800m</view>
					</view>
					<image src="../static/dz_icon.png" mode="widthFix" class="dz_icon"></image>
				</view>
			</view>
			
		</view>
    </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
    components: {
        NavBar,
    },
    data() {
        return {
            title: "附近的绘本自助屋",
            addressList: [],
        };
    },
    onLoad() {
        this.getAddressList();
    },
    methods: {
        toPrint() {
            uni.navigateTo({
                url: "/pages/print",
            });
        },
        getAddressList() {
            this.$u.post("get_cabin_list").then((res) => {
                this.addressList = res.data;
            });
        },
    },
    //   onLoad() {
    //     uni.hideTabBar();
    //   },
};
</script>

<style scoped>
	.dz_icon{
		width: 30px;
		height: auto;
		display: table;
		position: absolute;
		top: 50%;
		margin-top: -15px;
		right: 0px;
	}
	.txt2{
		width: 100%;
		height: auto;
		display: table;
		font-size: 13px;
		color: #7f7f7f;
		line-height: 22px;
	}
	.txt_nr1{
		width: 85%;
		height: auto;
		display: table;
		float: left;
		box-sizing: border-box;
		padding-right: 20px;
		position: relative;
	}
	.txt_nr1::before{
		content: "";
		width: 0.5px;
		height: 30px;
		display: table;
		background-color: #f2f2f2;
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: -15px;
	}
	.txt_nr{
		width: 100%;
		height: auto;
		display: table;
		position: relative;
	}
	.txt1{
		width: 100%;
		height: auto;
		display: table;
		font-size: 15px;
		color: #333;
		line-height: 30px;
	}
	.list{
		width: 100%;
		height: auto;
		display: table;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.bt_txt{
		width: 100%;
		height: auto;
		display: table;
		font-size: 18px;
		font-weight: bold;
		line-height: 30px;
		position: relative;
	}
	.txt{
		position: relative;
	}
	.bt_txt::before{
		content: "";
		width: 80px;
		height: 8px;
		border-radius: 50px;
		position: absolute;
		left: 0px;
		bottom: 2px;
		background: linear-gradient( to right,  rgba(101, 220, 80, 1),rgba(183, 248, 160, 1) );
	}
	.zb_list{
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
		box-sizing: border-box;
		padding: 15px 5%;
	}
	.btn_sj>image:nth-child(1){
		width: 48%;
		height: auto;
		display: table;
		float: left;
	}
	.btn_sj>image:nth-child(2){
		width: 48%;
		height: auto;
		display: table;
		float: right;
	}
	.btn_sj{
		width: 100%;
		height: auto;
		display: table;
	}
	.content{
		width: 90%;
		height: auto;
		display: table;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
body {
    position: relative;
	background-color: rgba(253,253,240,1);
}
page{
	background-color: rgba(253,253,240,1);
}
image {
    width: 66rpx;
    height: 66rpx;
}
.address-body {
    width: 100%;
}
.address-title {
    display: flex;
}
.address-title-name {
    text-align: center;
    width: 200rpx;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-title-address {
    width: 300rpx;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-title-distance {
    width: 150rpx;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-title-navigation {
    width: 100rpx;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-item {
    display: flex;
}
.address-item-name {
    text-align: center;
    width: 200rpx;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-item-address {
    width: 300rpx;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-item-distance {
    width: 150rpx;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-item-navigation {
    width: 100rpx;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx 0;
}
.address-btn-list {
    position: absolute;
    bottom: 0px;
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.address-btn-list view {
    padding: 20rpx 30rpx;
    background-color: rgb(255, 218, 149);
    box-shadow: 0 0 10rpx #999;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
}
</style>
